<template>
  <div class="aside">
    <div class="wrapper">
      <div class="aside-right">
        <login-button v-show="!loginStatus"></login-button>
        <login-succ v-show="loginStatus"></login-succ>
        <menu-box></menu-box>
      </div>
    </div>
  </div>
</template>

<script>
import LoginButton from './component/LoginButton.vue';
import LoginSucc from './component/LoginSucc.vue';
import MenuBox from './component/MenuBox.vue';
export default {
  name: 'AsideRight',
  inject: ['reload'],
  components: {
    LoginButton,
    LoginSucc,
    MenuBox
  },
  data () {
    return {
      loginStatus: false
    }
  },
  watch: {
    $route (to, from ,next) {
      if (to.path !== from.path) {
        this.reload();
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl';
  .aside
    padding-left: .05rem
    width: 5.5rem
    background-color: #fcfcfc
    font-size: .24rem
    .wrapper
      padding: .4rem
</style>